<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-row>
                    <el-col>
                        <el-input class="input" v-model="input1" size="small" placeholder="请输入学号或姓名" />
                    </el-col>
                    <el-col>
                        <el-button class="button" type="text" @click="search">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="工号" width="150" :sortable="{ custom }" />
            <el-table-column prop="name" label="姓名" width="120" :sortable="{ custom }">
                <template #default="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column prop="genda" label="性别" width="120" :sortable="{ custom }" />
            <el-table-column prop="position" label="职称" width="120" :sortable="{ custom }" />
            <el-table-column prop="subject" label="科目" width="120" :sortable="{ custom }" />
            <el-table-column prop="age" label="年龄" width="120" :sortable="{ custom }" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                    <el-dialog v-model="dialogFormVisible" title="学生信息更新">
                        <el-form :model="form">
                            <el-form-item label="工号" :label-width="formLabelWidth">
                                <el-input v-model="form.id" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="genda">
                                <el-select v-model="form.genda" placeholder="请选择性别">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="职称" :label-width="formLabelWidth">
                                <el-select v-model="form.position" placeholder="请选择职称">
                                    <el-option label="正高级教师" value="正高级教师" />
                                    <el-option label="高级教师" value="高级教师" />
                                    <el-option label="一级教师" value="一级教师" />
                                    <el-option label="二级教师" value="二级教师" />
                                    <el-option label="三级教师" value="三级教师" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="科目" :label-width="formLabelWidth">
                                <el-select v-model="form.subject" placeholder="请选择科目">
                                    <el-option label="语文" value="语文" />
                                    <el-option label="数学" value="数学" />
                                    <el-option label="英语" value="英语" />
                                    <el-option label="专业" value="专业" />
                                    <el-option label="音乐" value="音乐" />
                                    <el-option label="美术" value="美术" />
                                    <el-option label="体育" value="体育" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="出生日期：" :label-width="formLabelWidth">
                                <el-date-picker v-model="form.birthdate" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="updateOK">确认</el-button>
                            </span>
                        </template>
                    </el-dialog>
                    <el-button type="text" size="small" @click="deletebyID(scope.row)">删除</el-button>
                    <el-dialog v-model="dialogVisible" title="提示" width="30%" :before-close="handleClose">
                        <span>确定删除吗？</span>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="deleteOK">确定</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            input1: '',
            form: {
                id:'',
                name:'',
                genda:'',
                position:'',
                subject:'',
                birthdate:'',
                age:''
            },
            dialogFormVisible: false,
            dialogVisible: false,
            deleteid: '',
            message: ''
        }
    },
    mounted() {
        this.searchall()
    },
    methods: {
        deleteOK() {
            const that = this
            this.axios.get("/deleteTeacher", {
                params: { key1: this.deleteid }
            }).then(function (response) {
                //  console.log(response)
                that.searchall()
                that.dialogVisible = false
            })
        },
        deletebyID(row) {
            this.dialogVisible = true
            this.deleteid = row.id
        },
        searchall() {
            const that = this

            this.axios.get("/getAllTeachers")
                .then(function (response) {
                    that.tableData = response.data
                })
        },
        search() {
            const that = this
            console.log(that)
            this.axios.get("/getTeachers", {
                params: { key1: this.input1 }
            })
                .then(function (response) {
                    that.tableData = response.data
                })
        },
        update(row) {
            this.dialogFormVisible = true
            this.form = row
        },
        updateOK() {
            const that = this
            this.axios.get("/updateTeacher",
                {
                    params: {
                        key1: this.form.id,
                        key2: this.form.name,
                        key3: this.form.genda,
                        key4: this.form.position,
                        key5: this.form.subject,
                        key6: this.form.birthdate
                    }
                })
                .then(function (response) {
                    //console.log(response)
                    that.searchall()
                    that.dialogFormVisible = false
                })
        }
    }

}
</script>

<style>
.input {
    width: 150px;
}
</style>